<template>
  <el-dialog :title="title" v-model="open" width="600px" append-to-body>
    <el-form ref="releaseTaskRef" :model="form" :rules="rules" label-width="85px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="任务名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入任务名称"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
            <el-form-item label="任务内容" prop="content">
                <el-input v-model="form.content" type="textarea" rows="8" placeholder="请输入任务内容"  clearable/>
            </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件" prop="files">
            <file-upload
                v-model="form.files"
                :multiple="true"
                :limit="10"
                :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']"
                :file-size="4">
            </file-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { applyFor } from "@/api/putleader/putleader";
const props = defineProps({
  parentMethod: {
    type: Function,
    required: true,
    default: () => {}
  }
})
const { proxy } = getCurrentInstance();
const open = ref(false);
const title = ref("");
const releaseTaskRef = ref(null);
const data = reactive({
  form: {
    id: null,
    title: null,
    content: null,
    stage: null
  },
  rules: {
    title: [
      { required: true, message: "名称不能为空", trigger: "blur" }
    ],
    content: [
      { required: true, message: "内容不能为空", trigger: "blur" }
    ]
  }
});
const { form, rules } = toRefs(data);

const show = (data, dialogTitle) => {
  reset();
  form.value = data!== null? data : { id: null, title: null, content: null, stage: null };//数据
  title.value = dialogTitle;//标题
  open.value = true;
};

defineExpose({
  show
});

/** 提交按钮 */
function submitForm() {
  proxy.$refs["releaseTaskRef"].validate(valid => {
      if (valid) {
        form.value.stage = "1";
        applyFor(form.value).then(response => {
            proxy.$modal.msgSuccess("再提交成功");
            open.value = false;
            props.parentMethod(form.value);
        });
      }
  });
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    title: null,
    content: null,
    stage: null
  };
  proxy.resetForm("releaseTaskRef");
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}
</script>